<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" color="#156DAC" @clickLeft="pageback">
			<view class="header-icon-text-panel">
				<text class="title">报警信息</text>
			</view>
		</uni-nav-bar>
		<view class="content padding">
			<form class="user-form" :disabled="true">
				<view class="card">
					<view class="user-form-item">
						<view class="form-label">报警信息</view>
						<view class="form-input desc" style="height: auto;">
							{{formObj.historyAlarm.alarmInformation}}
						</view>
					</view>
					<view class="user-form-item">
						<view class="form-label">开始时间</view>
						<view class="form-input desc">
							{{formObj.historyAlarm.alarmStartTime || '- -'}}
						</view>
					</view>
					<view class="user-form-item">
						<view class="form-label">结束时间</view>
						<view class="form-input desc">
							{{formObj.historyAlarm.alarmEndTime || '- -'}}
						</view>
					</view>
					<view class="user-form-item">
						<view class="form-label">持续时长</view>
						<view class="form-input desc">
							{{formObj.historyAlarm.durationStr || '- -'}}=>{{formObj.historyAlarm.duration || '- -'}}小时
						</view>
					</view>
					<view class="user-form-item">
						<view class="form-label">处理结果</view>
						<view class="form-input desc" style="height: auto;">
							{{formObj.historyAlarm.processingResults || '- -'}}
						</view>
					</view>
				</view>
				
				<!-- 步骤条 -->
				<view class="card">
					<view class="card-title">操作流程</view>
					<uni-steps 
						:options="steps" direction="column" :active="steps.length"
					>
					</uni-steps>
				</view>
				<!-- 评价 apply -->
				<view v-if="type == 'apply' || type =='detail'" class="card">
					<view class="user-form-item">
						<text class="form-label ">运维结果评价</text>
						<uni-rate class="form-input no-border flex-start-center" :disabled="isDetail"  :size="18" :value="formObj.historyAlarm.overallEvaluation" @change="(e)=>rateChange('overallEvaluation',e)"/>
					</view>
					<view class="user-form-item">
						<text class="form-label ">处置人员评价</text>
						<uni-rate class="form-input no-border flex-start-center"  :disabled="isDetail" :size="18" :value="formObj.historyAlarm.disposalPersonnelEvaluation"  @change="(e)=>rateChange('disposalPersonnelEvaluation',e)"/>
					</view>
					<view class="user-form-item">
						<text class="form-label ">内容说明</text>
						<text class="form-input no-border">{{formObj.historyAlarm.contentDescription||'--'}}</text>
					</view>
				</view>
			</form>
			
		</view>
		<ourLoading isFullScreen color="#156dac" :active="businessLoading" />
	</view>
</template>
<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import ourLoading from '@/components/our-loading/our-loading.vue'
	import uniSteps from '@/components/uni-steps/uni-steps.vue'
	
	const getBussinessDetailUrl = '/business/historyAlarm'
	
	export default {
		components: {
			uniIcons,uniPopup,ourLoading,uniSteps
		},
		data() {
			return {
				isDetail: false,
				type: '',
				businessLoading: false,
				formObj: {
					historyAlarm: {
					  alarmInformation: null,
					  alarmStartTime: null,
					  alarmEndTime: null,
					  duration: null,
					  processingResults: null,
					  contentDescription: '',
					  disposalPersonnelEvaluation: 0,
					  overallEvaluation: 0
					},
					alarmProcesses: null
				},
				tableValue: [],
				resultList:[
					{id:1,label:'优'},
					{id:2,label:'良'},
				],
				steps: [{title:'买家下单',desc:'2018-11-11'},],
				unitList:[
					{id: 1,name: '单位一'},{id: 1,name: '单位二'},
				],
				form:{
					name: '',date: '',unit: '',
				}
			}
		},
		onLoad(option) {
			console.log(option)
			const id = option.id
			if(id){
				this.businessLoading = true
				this.$api.request(`${getBussinessDetailUrl}/${id}`,{
					method: 'get',
				}).then(res=>{
					this.businessLoading = false
					console.log(res)
					if(res.success){
						this.formObj = res.data
						this.steps = res.data.alarmProcesses.map(item=>{
							return {
								title: item.operationContent,
								desc: item.operationTime
							}
						})
					}
				}).catch(()=>{
					this.businessLoading = false
				})
			}
			this.isDetail = option.type === 'detail'
			this.type = option.type
		},
		methods: {
			toggle(){
				this.$refs.popup.open()
			},
			pageback(){
				uni.navigateBack({
					delta: 1
				});
			},
			tableChange(e){
				console.log(e.detail)
			},
			setTableData(e,index){
				console.log(e.detail.value,index)
				this.$set(this.tableValue,index,e.detail.value)
			},
			rateChange(key,e){
				this.formObj.historyAlarm[key] = e.value
			}
		}
	}
</script>

<style lang="scss" scoped>
.popup-content {
	background-color: #fff;
	padding: 15px;
}

</style>
